Đăng ký React Context: Kiểm soát cập nhật chi tiết cho Ứng dụng Toàn cầu

Trong bối cảnh phát triển web hiện đại năng động, việc quản lý trạng thái hiệu quả là tối quan trọng. Khi các ứng dụng phát triển về độ phức tạp, đặc biệt là những ứng dụng có lượng người dùng toàn cầu, việc đảm bảo các thành phần chỉ re-render khi cần thiết sẽ trở thành một mối quan tâm về hiệu suất quan trọng. API Context của React cung cấp một cách mạnh mẽ để chia sẻ trạng thái trên cây thành phần của bạn mà không cần truyền các thuộc tính xuống theo cách thủ công. Tuy nhiên, một cạm bẫy phổ biến là kích hoạt re-render không cần thiết trong các thành phần sử dụng context, ngay cả khi chỉ một phần nhỏ của trạng thái được chia sẻ đã thay đổi. Bài đăng này đi sâu vào nghệ thuật kiểm soát cập nhật chi tiết trong đăng ký React Context, cho phép bạn xây dựng các ứng dụng toàn cầu có thể mở rộng và hiệu quả hơn.

Tìm hiểu về React Context và Hành vi Re-render của nó

React Context cung cấp một cơ chế để truyền dữ liệu thông qua cây thành phần mà không cần truyền các thuộc tính xuống theo cách thủ công ở mọi cấp độ. Nó bao gồm ba phần chính:

• Tạo Context: Sử dụng React.createContext() để tạo một đối tượng Context.
• Provider: Một thành phần cung cấp giá trị ngữ cảnh cho các phần tử con của nó.
• Consumer: Một thành phần đăng ký các thay đổi ngữ cảnh. Về mặt lịch sử, điều này được thực hiện bằng thành phần Context.Consumer, nhưng phổ biến hơn hiện nay, nó được thực hiện bằng cách sử dụng hook useContext.

Thử thách cốt lõi phát sinh từ cách API Context của React xử lý các bản cập nhật. Khi giá trị được cung cấp bởi một Context Provider thay đổi, tất cả các thành phần sử dụng ngữ cảnh đó (trực tiếp hoặc gián tiếp) sẽ re-render theo mặc định. Hành vi này có thể dẫn đến các nút thắt cổ chai về hiệu suất đáng kể, đặc biệt là trong các ứng dụng lớn hoặc khi giá trị ngữ cảnh phức tạp và được cập nhật thường xuyên. Hãy tưởng tượng một nhà cung cấp chủ đề toàn cầu, nơi chỉ thay đổi màu chính. Nếu không có tối ưu hóa thích hợp, mọi thành phần đang lắng nghe ngữ cảnh chủ đề sẽ re-render, ngay cả những thành phần chỉ sử dụng họ phông chữ.

Vấn đề: Re-render rộng với `useContext`

Hãy minh họa hành vi mặc định bằng một tình huống phổ biến. Giả sử chúng ta có ngữ cảnh hồ sơ người dùng chứa nhiều thông tin người dùng khác nhau: tên, email, tùy chọn và số lượng thông báo. Nhiều thành phần có thể cần truy cập vào dữ liệu này.

            // UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = (count) => {
    setUser(prevUser => ({ ...prevUser, notificationCount: count }));
  };

  return (
    
      {children}
    
  );
};

export const useUser = () => useContext(UserContext);

            

              
                Copy
              
            
          

Bây giờ, hãy xem xét hai thành phần sử dụng ngữ cảnh này:

            // UserNameDisplay.js
import React from 'react';
import { useUser } from './UserContext';

const UserNameDisplay = () => {
  const { user } = useUser();
  console.log('UserNameDisplay rendered');
  return User Name: {user.name};
};

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUser } from './UserContext';

const UserNotificationCount = () => {
  const { user, updateNotificationCount } = useUser();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {user.notificationCount}
       updateNotificationCount(user.notificationCount + 1)}>Add Notification
    
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

Trong thành phần App chính của bạn:

            // App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserNameDisplay from './UserNameDisplay';
import UserNotificationCount from './UserNotificationCount';

function App() {
  return (
    
      
Global User Dashboard
      
      
      {/* Other components that might consume UserContext or not */}
    
  );
}

export default App;

            

              
                Copy
              
            
          

Khi bạn nhấp vào nút "Thêm thông báo" trong UserNotificationCount, cả UserNotificationCount và UserNameDisplay sẽ re-render, mặc dù UserNameDisplay chỉ quan tâm đến tên của người dùng và không quan tâm đến số lượng thông báo. Điều này là do toàn bộ đối tượng user trong giá trị ngữ cảnh đã được cập nhật, kích hoạt re-render cho tất cả người dùng của UserContext.

Các chiến lược để cập nhật chi tiết

Chìa khóa để đạt được các bản cập nhật chi tiết là đảm bảo rằng các thành phần chỉ đăng ký các phần trạng thái cụ thể mà chúng cần. Dưới đây là một số chiến lược hiệu quả:

1. Chia nhỏ ngữ cảnh

Cách tiếp cận đơn giản nhất và thường hiệu quả nhất là chia ngữ cảnh của bạn thành các ngữ cảnh nhỏ hơn, tập trung hơn. Nếu các phần khác nhau của ứng dụng của bạn cần các lát cắt khác nhau của trạng thái toàn cầu, hãy tạo các ngữ cảnh riêng biệt cho chúng.

Hãy cải tiến ví dụ trước:

            // UserProfileContext.js
import React, { createContext, useContext } from 'react';

const UserProfileContext = createContext();

export const UserProfileProvider = ({ children, profileData }) => {
  return (
    
      {children}
    
  );
};

export const useUserProfile = () => useContext(UserProfileContext);

// UserNotificationsContext.js
import React, { createContext, useContext, useState } from 'react';

const UserNotificationsContext = createContext();

export const UserNotificationsProvider = ({ children }) => {
  const [notificationCount, setNotificationCount] = useState(0);

  const addNotification = () => {
    setNotificationCount(prev => prev + 1);
  };

  return (
    
      {children}
    
  );
};

export const useUserNotifications = () => useContext(UserNotificationsContext);

            

              
                Copy
              
            
          

Và cách bạn sẽ sử dụng chúng:

            // App.js
import React from 'react';
import { UserProfileProvider } from './UserProfileContext';
import { UserNotificationsProvider } from './UserNotificationsContext';
import UserNameDisplay from './UserNameDisplay'; // Still uses useUserProfile
import UserNotificationCount from './UserNotificationCount'; // Now uses useUserNotifications

function App() {
  const initialProfileData = {
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
  };

  return (
    
      
        
Global User Dashboard
        
        
      
    
  );
}

export default App;

// UserNameDisplay.js (updated to use UserProfileContext)
import React from 'react';
import { useUserProfile } from './UserProfileContext';

const UserNameDisplay = () => {
  const userProfile = useUserProfile();
  console.log('UserNameDisplay rendered');
  return User Name: {userProfile.name};
};

export default UserNameDisplay;

// UserNotificationCount.js (updated to use UserNotificationsContext)
import React from 'react';
import { useUserNotifications } from './UserNotificationsContext';

const UserNotificationCount = () => {
  const { notificationCount, addNotification } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {notificationCount}
      Add Notification
    
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

Với sự phân chia này, khi số lượng thông báo thay đổi, chỉ UserNotificationCount sẽ re-render. UserNameDisplay, đăng ký UserProfileContext, sẽ không re-render vì giá trị ngữ cảnh của nó chưa thay đổi. Đây là một cải tiến đáng kể về hiệu suất.

Các cân nhắc toàn cầu: Khi chia nhỏ ngữ cảnh cho một ứng dụng toàn cầu, hãy xem xét sự phân chia các mối quan tâm một cách hợp lý. Ví dụ: một giỏ hàng toàn cầu có thể có các ngữ cảnh riêng biệt cho các mặt hàng, tổng giá và trạng thái thanh toán. Điều này phản ánh cách các bộ phận khác nhau trong một tập đoàn toàn cầu quản lý dữ liệu của họ một cách độc lập.

2. Ghi nhớ với `React.memo` và `useCallback`/`useMemo`

Ngay cả khi bạn có một ngữ cảnh duy nhất, bạn có thể tối ưu hóa các thành phần sử dụng nó bằng cách ghi nhớ chúng. React.memo là một thành phần cấp cao hơn ghi nhớ thành phần của bạn. Nó thực hiện so sánh nông của các thuộc tính trước và mới của thành phần. Nếu chúng giống nhau, React sẽ bỏ qua việc re-render thành phần.

Tuy nhiên, useContext không hoạt động trên các thuộc tính theo nghĩa truyền thống; nó kích hoạt re-render dựa trên các thay đổi giá trị ngữ cảnh. Khi giá trị ngữ cảnh thay đổi, thành phần sử dụng nó sẽ được re-render một cách hiệu quả. Để tận dụng React.memo một cách hiệu quả với ngữ cảnh, bạn cần đảm bảo rằng thành phần nhận các phần dữ liệu cụ thể từ ngữ cảnh dưới dạng thuộc tính hoặc giá trị ngữ cảnh tự nó ổn định.

Một mẫu nâng cao hơn liên quan đến việc tạo các hàm chọn bên trong nhà cung cấp ngữ cảnh của bạn. Các bộ chọn này cho phép các thành phần tiêu dùng đăng ký các lát cắt cụ thể của trạng thái và nhà cung cấp có thể được tối ưu hóa để chỉ thông báo cho người đăng ký khi lát cắt cụ thể của họ thay đổi. Điều này thường được thực hiện bằng các hook tùy chỉnh tận dụng useContext và `useMemo`.

Hãy xem lại ví dụ về ngữ cảnh đơn lẻ, nhưng hướng đến các bản cập nhật chi tiết hơn mà không cần chia nhỏ ngữ cảnh:

            // UserContextImproved.js
import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  // Memoize the specific parts of the state if they are passed down as props
  // or if you create custom hooks that consume specific parts.

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      // Create a new user object only if notificationCount changes
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // Provide specific selectors/values that are stable or only update when needed
  const contextValue = useMemo(() => ({
    user: {
      name: user.name,
      email: user.email,
      preferences: user.preferences
      // Exclude notificationCount from this memoized value if possible
    },
    notificationCount: user.notificationCount,
    updateNotificationCount
  }), [user.name, user.email, user.preferences, user.notificationCount, updateNotificationCount]);

  return (
    
      {children}
    
  );
};

// Custom hooks for specific slices of the context
export const useUserName = () => {
  const { user } = useContext(UserContext);
  // `React.memo` on consuming component will work if `user.name` is stable
  return user.name;
};

export const useUserNotifications = () => {
  const { notificationCount, updateNotificationCount } = useContext(UserContext);
  // `React.memo` on consuming component will work if `notificationCount` and `updateNotificationCount` are stable
  return { notificationCount, updateNotificationCount };
};

            

              
                Copy
              
            
          

Bây giờ, cải tiến các thành phần sử dụng để sử dụng các hook chi tiết này:

            // UserNameDisplay.js
import React from 'react';
import { useUserName } from './UserContextImproved';

const UserNameDisplay = React.memo(() => {
  const userName = useUserName();
  console.log('UserNameDisplay rendered');
  return User Name: {userName};
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserNotifications } from './UserContextImproved';

const UserNotificationCount = React.memo(() => {
  const { notificationCount, updateNotificationCount } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {notificationCount}
       updateNotificationCount(notificationCount + 1)}>Add Notification
    
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

Trong phiên bản cải tiến này:

• `useCallback` được sử dụng cho các hàm như updateNotificationCount để đảm bảo chúng có một danh tính ổn định trên các re-render, ngăn re-render không cần thiết trong các thành phần con nhận chúng dưới dạng thuộc tính.
• `useMemo` được sử dụng trong nhà cung cấp để tạo một giá trị ngữ cảnh đã ghi nhớ. Bằng cách chỉ bao gồm các phần trạng thái cần thiết (hoặc các giá trị có nguồn gốc) trong đối tượng đã ghi nhớ này, chúng ta có thể giảm số lần người dùng nhận được một tham chiếu giá trị ngữ cảnh mới. Quan trọng là, chúng ta tạo các hook tùy chỉnh (useUserName, useUserNotifications) để trích xuất các phần cụ thể của ngữ cảnh.
• `React.memo` được áp dụng cho các thành phần sử dụng. Vì các thành phần này hiện chỉ sử dụng một phần cụ thể của trạng thái (ví dụ: userName hoặc notificationCount) và các giá trị này được ghi nhớ hoặc chỉ cập nhật khi dữ liệu cụ thể của chúng thay đổi, React.memo có thể ngăn chặn re-render một cách hiệu quả khi trạng thái không liên quan trong ngữ cảnh thay đổi.

Khi bạn nhấp vào nút, user.notificationCount thay đổi. Tuy nhiên, đối tượng contextValue được truyền cho Provider có thể được tạo lại. Điểm mấu chốt là hook useUserName nhận được user.name, thứ chưa thay đổi. Nếu thành phần UserNameDisplay được bọc trong React.memo và các thuộc tính của nó (trong trường hợp này, giá trị được trả về bởi useUserName) chưa thay đổi, nó sẽ không re-render. Tương tự, UserNotificationCount re-render vì lát cắt trạng thái cụ thể của nó (notificationCount) đã thay đổi.

Các cân nhắc toàn cầu: Kỹ thuật này đặc biệt có giá trị đối với các cấu hình toàn cầu như chủ đề giao diện người dùng hoặc cài đặt quốc tế hóa (i18n). Nếu người dùng thay đổi ngôn ngữ ưa thích của họ, chỉ các thành phần hiển thị văn bản được bản địa hóa một cách tích cực mới nên re-render, không phải mọi thành phần cuối cùng có thể cần truy cập vào dữ liệu ngôn ngữ.

3. Bộ chọn ngữ cảnh tùy chỉnh (Nâng cao)

Đối với các cấu trúc trạng thái cực kỳ phức tạp hoặc khi bạn cần kiểm soát tinh vi hơn nữa, bạn có thể triển khai các bộ chọn ngữ cảnh tùy chỉnh. Mẫu này liên quan đến việc tạo một thành phần cấp cao hơn hoặc một hook tùy chỉnh lấy một hàm chọn làm đối số. Hook sau đó đăng ký ngữ cảnh, nhưng chỉ re-render thành phần sử dụng khi giá trị do hàm chọn trả về thay đổi.

Điều này tương tự như những gì các thư viện như Zustand hoặc Redux đạt được với bộ chọn của chúng. Bạn có thể bắt chước hành vi này:

            // UserContextSelectors.js
import React, { createContext, useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // The entire user object is the value for simplicity here,
  // but the custom hook handles selection.
  const contextValue = useMemo(() => ({ user, updateNotificationCount }), [user, updateNotificationCount]);

  return (
    
      {children}
    
  );
};

// Custom hook with selection
export const useUserContext = (selector) => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within a UserProvider');
  }

  const { user, updateNotificationCount } = context;

  // Memoize the selected value to prevent unnecessary re-renders
  const selectedValue = useMemo(() => selector(user), [user, selector]);

  // Use a ref to track the previous selected value
  const previousSelectedValue = useRef();

  useEffect(() => {
    previousSelectedValue.current = selectedValue;
  }, [selectedValue]);

  // Only re-render if the selected value has changed.
  // React.memo on the consuming component combined with this
  // ensures efficient updates.
  const isSelectedValueDifferent = selectedValue !== previousSelectedValue.current;

  return {
    selectedValue,
    updateNotificationCount,
    // This is a simplified mechanism. A robust solution would involve
    // a more complex subscription manager within the provider.
    // For demonstration, we rely on the consuming component's memoization.
  };
};

            

              
                Copy
              
            
          

Các thành phần sử dụng sẽ trông như thế này:

            // UserNameDisplay.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNameDisplay = React.memo(() => {
  // Selector function for user name
  const userNameSelector = (user) => user.name;
  const { selectedValue: userName } = useUserContext(userNameSelector);

  console.log('UserNameDisplay rendered');
  return User Name: {userName};
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNotificationCount = React.memo(() => {
  // Selector function for notification count and the update function
  const notificationSelector = (user) => ({ count: user.notificationCount });
  const { selectedValue, updateNotificationCount } = useUserContext(notificationSelector);

  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {selectedValue.count}
       updateNotificationCount(selectedValue.count + 1)}>Add Notification
    
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

Trong mẫu này:

• Hook useUserContext lấy một hàm selector.
• Nó sử dụng useMemo để tính toán giá trị đã chọn dựa trên ngữ cảnh. Giá trị đã chọn này được ghi nhớ.
• Sự kết hợp useEffect và `useRef` là một cách đơn giản hóa để đảm bảo rằng thành phần chỉ re-render nếu selectedValue thực sự thay đổi. Việc triển khai thực sự mạnh mẽ sẽ liên quan đến một hệ thống quản lý đăng ký phức tạp hơn trong nhà cung cấp, nơi người dùng đăng ký bộ chọn của họ và nhà cung cấp chọn lọc thông báo cho họ.
• Các thành phần sử dụng, được bọc trong React.memo, sẽ chỉ re-render nếu giá trị do hàm chọn cụ thể của chúng trả về thay đổi.

Các cân nhắc toàn cầu: Cách tiếp cận này mang lại sự linh hoạt tối đa. Đối với một nền tảng thương mại điện tử toàn cầu, bạn có thể có một ngữ cảnh duy nhất cho tất cả dữ liệu liên quan đến giỏ hàng nhưng sử dụng bộ chọn để chỉ cập nhật số lượng mặt hàng trong giỏ hàng được hiển thị, tổng phụ hoặc chi phí vận chuyển một cách độc lập.

Khi nào nên sử dụng Chiến lược nào

• Chia nhỏ ngữ cảnh: Đây thường là phương pháp được ưu tiên cho hầu hết các tình huống. Nó dẫn đến mã sạch hơn, phân tách các mối quan tâm tốt hơn và dễ suy luận hơn. Sử dụng nó khi các phần khác nhau của ứng dụng của bạn rõ ràng phụ thuộc vào các tập hợp dữ liệu toàn cầu riêng biệt.
• Ghi nhớ với `React.memo`, `useCallback`, `useMemo` (với các hook tùy chỉnh): Đây là một chiến lược trung gian tốt. Nó giúp ích khi việc chia nhỏ ngữ cảnh có vẻ quá mức hoặc khi một ngữ cảnh duy nhất theo logic chứa dữ liệu được kết hợp chặt chẽ. Nó đòi hỏi nhiều nỗ lực thủ công hơn nhưng cung cấp khả năng kiểm soát chi tiết trong một ngữ cảnh duy nhất.
• Bộ chọn ngữ cảnh tùy chỉnh: Chỉ dành riêng cho các ứng dụng cực kỳ phức tạp, nơi các phương pháp trên trở nên khó thực hiện hoặc khi bạn muốn bắt chước các mô hình đăng ký tinh vi của các thư viện quản lý trạng thái chuyên dụng. Nó cung cấp khả năng kiểm soát chi tiết nhất nhưng đi kèm với độ phức tạp ngày càng tăng.

Các phương pháp hay nhất để quản lý ngữ cảnh toàn cầu

Khi xây dựng các ứng dụng toàn cầu với React Context, hãy xem xét các phương pháp hay nhất sau:

• Giữ cho các giá trị ngữ cảnh đơn giản: Tránh các đối tượng ngữ cảnh lớn, nguyên khối. Chia nhỏ chúng một cách hợp lý.
• Ưu tiên các Hook tùy chỉnh: Việc trừu tượng hóa việc sử dụng ngữ cảnh thành các hook tùy chỉnh (ví dụ: useUserProfile, useTheme) giúp các thành phần của bạn sạch hơn và thúc đẩy khả năng tái sử dụng.
• Sử dụng `React.memo` một cách thận trọng: Không bọc mọi thành phần trong `React.memo`. Hồ sơ ứng dụng của bạn và chỉ áp dụng nó ở những nơi re-render là một mối quan tâm về hiệu suất.
• Tính ổn định của các hàm: Luôn sử dụng `useCallback` cho các hàm được truyền xuống thông qua ngữ cảnh hoặc các thuộc tính để ngăn re-render ngoài ý muốn.
• Ghi nhớ dữ liệu có nguồn gốc: Sử dụng `useMemo` cho bất kỳ giá trị nào được tính toán có nguồn gốc từ ngữ cảnh được sử dụng bởi nhiều thành phần.
• Xem xét các thư viện của bên thứ ba: Đối với nhu cầu quản lý trạng thái toàn cầu rất phức tạp, các thư viện như Zustand, Jotai hoặc Recoil cung cấp các giải pháp tích hợp cho các đăng ký và bộ chọn chi tiết, thường với ít boilerplate hơn.
• Tài liệu về Ngữ cảnh của bạn: Ghi lại rõ ràng những gì mỗi ngữ cảnh cung cấp và cách người dùng nên tương tác với nó. Điều này là rất quan trọng đối với các nhóm lớn, phân tán làm việc trên các dự án toàn cầu.

Kết luận

Làm chủ khả năng kiểm soát cập nhật chi tiết trong React Context là điều cần thiết để xây dựng các ứng dụng toàn cầu có hiệu suất cao, khả năng mở rộng và có thể bảo trì. Bằng cách chia nhỏ ngữ cảnh một cách chiến lược, tận dụng các kỹ thuật ghi nhớ và hiểu khi nào cần triển khai các mẫu bộ chọn tùy chỉnh, bạn có thể giảm đáng kể các re-render không cần thiết và đảm bảo ứng dụng của bạn vẫn phản hồi nhanh chóng, bất kể quy mô hoặc độ phức tạp của trạng thái của nó.

Khi bạn xây dựng các ứng dụng phục vụ người dùng trên các khu vực, múi giờ và điều kiện mạng khác nhau, những tối ưu hóa này trở thành không chỉ là các phương pháp hay nhất mà còn là những điều cần thiết. Áp dụng các chiến lược này để mang lại trải nghiệm người dùng vượt trội cho đối tượng toàn cầu của bạn.